<template>
	<div>
		<el-row>
			<el-col :span="24">
				<el-card class="card-image" :style="`background-image: url('/images/幻灯片6.png');`" shadow="hover">
				</el-card>
			</el-col>
		</el-row>
		<div style="height: 20px;"></div>
		<el-row>
			<el-col :span="24">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<el-text size="large">快捷方式</el-text>
					</template>
					<el-row :gutter="20">
						<el-col :span="8">
							<el-button class="my-btn-max" type="primary" :icon="Avatar">客户建档</el-button>
						</el-col>
						<el-col :span="8">
							<el-button class="my-btn-max" type="primary" :icon="PhoneFilled">客户跟进</el-button>
						</el-col>
						<el-col :span="8">
							<el-button class="my-btn-max" type="primary" :icon="CopyDocument">创建订单</el-button>
						</el-col>
					</el-row>
					<div style="height: 10px;"></div>
					<el-row :gutter="20">
						<el-col :span="8">
							<el-button class="my-btn-max" type="primary" :icon="MessageBox">开票申请</el-button>
						</el-col>
						<el-col :span="8">
							<el-button class="my-btn-max" type="primary" :icon="ShoppingCart">创建采购需求</el-button>
						</el-col>
						<el-col :span="8">
							<el-button class="my-btn-max" type="primary" :icon="Headset">创建联系人</el-button>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>

		<div style="height: 20px;"></div>
		<el-row :gutter="20" style="text-align: center;">
			<el-col :span="6">
				<el-card shadow="hover">
					<div class="top">
						<el-text>
							本月提成
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								0
							</template>
							<el-text>
								0
							</el-text>
						</el-tooltip>
					</div>
					<div class="image">
						<el-image src="/images/j1.png"></el-image>
					</div>
					<div class="bottom">
						<el-text>
							环比增长率 -100%
							<el-icon :size="12" color="#67C23A">
								<CaretBottom />
							</el-icon>
						</el-text>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="hover">
					<div class="top">
						<el-text>
							本月签约金额
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								0W
							</template>
							<el-text>
								0W
							</el-text>
						</el-tooltip>
					</div>
					<div class="image">
						<el-image src="/images/j2.png"></el-image>
					</div>
					<div class="bottom">
						<el-text>
							环比增长率 -100%
							<!-- 						<el-icon :size="12" color="#67C23A">
								<CaretBottom />
							</el-icon> -->
						</el-text>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="hover">
					<div class="top">
						<el-text>
							本月回款金额
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								0.6W
							</template>
							<el-text>
								0.6W
							</el-text>
						</el-tooltip>
					</div>
					<div class="image">
						<el-image src="/images/j2.png"></el-image>
					</div>
					<div class="bottom">
						<el-text>
							环比增长率 -96.84%
							<!-- 						<el-icon :size="12" color="#67C23A">
								<CaretBottom />
							</el-icon> -->
						</el-text>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="hover">
					<div class="top">
						<el-text>
							本月签约订单数
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								0
							</template>
							<el-text>
								0
							</el-text>
						</el-tooltip>
					</div>
					<div class="image">
						<el-image src="/images/j3.png"></el-image>
					</div>
					<div class="bottom">
						<el-text>
							环比增长率 -100%
							<el-icon :size="12" color="#67C23A">
								<CaretBottom />
							</el-icon>
						</el-text>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="6">
				<el-card style="height: 384px;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text size="large">
									待办事项
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<List :list="todosList"></List>
				</el-card>
			</el-col>
			<el-col :span="18">
				<el-card style="height: 384px;" shadow="hover" body-style="padding: 0;">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="font-size: 16px;">流程-我发起的</el-text>
							</div>
							<div class="right">
								<el-popover placement="bottom" :width="200" trigger="click">
									<template #reference>
										<el-button title="筛选" class="my-a"
											style="border: 1px solid #4db0e4;padding: 4px 6px;">
											<el-image style="width: 18px;height: 18px;"
												src="/images/svg/筛选.svg"></el-image>
										</el-button>
									</template>
									<!--  -->
								</el-popover>
								<Tab :list="tabList"></Tab>
								<el-divider direction="vertical" />
								<!--  -->
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<el-scrollbar style="height: 336px;">
						<div>
							<div v-for="(item,key) in reviewedList" :key="key"
								class="flex-space-between active px-20 py-10 b-b">
								<div class="left" style="flex: 1;">
									<el-text>
										{{item.id}}
									</el-text>
									<el-avatar :icon="item.icon"
										:style="{ margin: '0 5px 0 10px', backgroundColor: item.backgroundColor }"></el-avatar>
									<div>
										<div>
											<el-text>
												{{item.title}}
											</el-text>
											<el-tooltip effect="light" content="任务分配于 2024-06-03 15:47" placement="top">
												<el-text type="info"
													style="margin-left: 5px;font-size: 12px;cursor: pointer;">
													{{item.time}}
												</el-text>
											</el-tooltip>
										</div>
										<div>
											<el-text>
												<el-link href="" type="info">
													<el-text type="info" style="font-size: 12px;">{{item.sub}}</el-text>
													<el-divider direction="vertical" />
													<el-text type="info"
														style="font-size: 12px;">{{item.user}}</el-text>
												</el-link>
											</el-text>
										</div>
									</div>
								</div>
								<div class="right" style="justify-content: space-between;flex: 1;">
									<div>
										<div>
											<el-text>{{item.node}}</el-text>
										</div>
										<div>
											<el-text type="warning">{{item.isnode}}</el-text>
										</div>
									</div>
									<div>
										<el-button plain>
											<el-icon>
												<ArrowLeftBold />
											</el-icon>
										</el-button>
										<el-tooltip effect="light" content="查看执行记录" placement="top"><el-button
												:icon="Tickets" plain />
										</el-tooltip>
									</div>
								</div>
							</div>
						</div>
					</el-scrollbar>
				</el-card>
			</el-col>
		</el-row>

		<div style="height: 20px;"></div>
		<el-card style="height: 384px;" shadow="hover" class="calendar">
			<template #header>
				<div class="flex-space-between">
					<div class="left">
						<el-text size="large">
							待发货 日程
						</el-text>
					</div>
					<div class="right">
						<el-tooltip placement="top" effect="light" content="更多">
							<div class="my-a">
								<el-icon color="#676967">
									<MoreFilled />
								</el-icon>
							</div>
						</el-tooltip>
					</div>
				</div>
			</template>
			<!--  -->
			<el-row>
				<el-col :span="13">
					<el-calendar ref="calendar">
						<template #header="{ date }">
							<div class="left">
								<el-button text type="info">
									<el-text style="margin-right: 5px;">
										{{date}}
									</el-text>
								</el-button>
							</div>
							<div class="right">
								<el-button style="margin: auto;" text type="info" @click="selectDate('prev-month')">
									<el-icon>
										<ArrowLeft />
									</el-icon>
								</el-button>
								<el-button style="margin: auto;" text type="info" @click="selectDate('today')">
									<el-text>今天</el-text>
								</el-button>
								<el-button style="margin: auto;" text type="info" @click="selectDate('next-month')">
									<el-icon>
										<ArrowRight />
									</el-icon>
								</el-button>
							</div>
						</template>
					</el-calendar>
				</el-col>
				<el-col :span="11">
					<el-empty description="暂无数据" :image-size="100" />
				</el-col>
			</el-row>
		</el-card>

		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="6">
				<el-input style="width: 240px" placeholder="搜索订单编号" :prefix-icon="Search" />
			</el-col>
			<el-col :span="6">
				<el-select multiple clearable collapse-tags placeholder="搜索客户名称" popper-class="custom-header"
					:max-collapse-tags="1" style="width: 240px">
					<template #header>
						<el-input style="width: 240px" placeholder="搜索客户名称" :prefix-icon="Search" />
					</template>
					<el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-col>
			<el-col :span="6">
				<el-date-picker type="date" placeholder="筛选预计发货日期" />
			</el-col>
			<el-col :span="6">
				<el-select multiple clearable collapse-tags placeholder="筛选订单完成状态" popper-class="custom-header"
					:max-collapse-tags="1" style="width: 240px">
					<template #header>
						<el-input style="width: 240px" placeholder="筛选订单完成状态" :prefix-icon="Search" />
					</template>
					<el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-col>
		</el-row>

		<div style="height: 20px;"></div>

		<el-card style="height: 100%;" shadow="hover">
			<template #header>
				<div style="display: flex; justify-content: space-between;">
					<div>
						<span style="font-size: 16px;">订单列表</span> <span style="font-size: 14px;color: #9a9494">共 {{40}}
							条</span>
					</div>
					<div>
						<el-input style="width: 240px;margin-right: 5px;" placeholder="采购单号" :prefix-icon="Search" />

						<el-button type="primary">
							<el-icon size="18">
								<Plus />
							</el-icon>
						</el-button>
					</div>
				</div>
			</template>
			<el-table :data="tableData" style="width: 100%" height="470">
				<el-table-column fixed prop="date" label="订单编号" width="150" />
				<el-table-column prop="name" label="客户" width="120" />
				<el-table-column prop="state" label="销售" width="120" />
				<el-table-column prop="city" label="下单日期" width="120" />
				<el-table-column prop="address" label="订单状态" width="120" />
				<el-table-column prop="zip" label="订单总额" width="120" />
				<el-table-column prop="time" label="预计发货日期" width="120" />
				<el-table-column prop="fujian" label="合同附件" width="120" />
				<el-table-column prop="jie" label="已回款金额" width="120" />
				<el-table-column prop="dai" label="待回款金额" width="120" />
			</el-table>
		</el-card>

		<div style="height: 20px;"></div>

		<el-card style="height: 100%;" shadow="hover">
			<template #header>
				<div style="display: flex; justify-content: space-between;">
					<div>
						<span style="font-size: 16px;">客户列表</span> <span style="font-size: 14px;color: #9a9494">共 {{16}}
							条</span>
					</div>
					<div>
						<el-input style="width: 240px;margin-right: 5px;" placeholder="采购单号" :prefix-icon="Search" />

						<el-button type="primary">
							<el-icon size="18">
								<Plus />
							</el-icon>
						</el-button>
					</div>
				</div>
			</template>
			<el-table :data="tableData" style="width: 100%" height="470">
				<el-table-column fixed prop="date" label="客户名称" width="150" />
				<el-table-column prop="name" label="客户分级" width="120" />
				<el-table-column prop="state" label="客户联系人" width="120" />
				<el-table-column prop="city" label="客户联系电话" width="120" />
				<el-table-column prop="address" label="客户来源" width="120" />
				<el-table-column prop="zip" label="销售总额" width="120" />
				<el-table-column prop="time" label="已收款金额" width="120" />
				<el-table-column prop="fujian" label="待回款金额" width="120" />
				<el-table-column prop="jie" label="已开票金额" width="120" />
				<el-table-column prop="dai" label="待开票金额" width="120" />
			</el-table>
		</el-card>
		<div style="height: 20px;"></div>
		<el-row>
			<el-col :span="24">
				<el-card style="height: 44px;" shadow="hover" class="my1 flex-align-center">
					<el-button text :disabled="dateStartIndex<=0" @click="dateStartAll('start')">
						<el-icon>
							<ArrowLeft />
						</el-icon>
					</el-button>
					<!--  -->
					<el-select class="my1" ref="selectRef" v-model="selectValue" @change="selectChange" suffix-icon=""
						placeholder="月份">
						<template #header>
							<div class="flex-space-between">
								<el-text type="info" style="margin-left: 12px;">月份</el-text>
								<el-button v-show="selectValue" type="danger" text @click="selectEr">清空</el-button>
							</div>
						</template>
						<el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<!--  -->
					<el-button text :disabled="dateStartIndex===-1||dateStartIndex>=cities.length - 1"
						@click="dateStartAll('end')">
						<el-icon>
							<ArrowRight />
						</el-icon>
					</el-button>
				</el-card>
			</el-col>
		</el-row>
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									产品-销售排行
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart2" style="height: 400px;"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									客户-销售排行
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart3" style="height: 400px;"></div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import {

		Avatar, PhoneFilled, CopyDocument, MessageBox, ShoppingCart, Headset, Right, Back,
		CirclePlusFilled, Histogram, MoreFilled, Edit, ArrowDown, Tickets, ArrowLeftBold,
		Download, Search, Plus

	} from '@element-plus/icons-vue';
	import List from '../../components/list/list.vue';
	import Tab from '../../components/tab/tab.vue';
	import { VueDraggable } from 'vue-draggable-plus';
	import { CalendarDateType, CalendarInstance } from 'element-plus';
	import Menu from '../../components/menu/menu.vue';
	import { findIndexByLabel } from '../../utils/index';
	const checked1 = ref(false);
	const title = ref('销售工作台');
	const todosList = ref([{
		title: '待发货订单',
		bage: 31,
		color: '#ff7919'
	}, {
		title: '待回款金额',
		bage: '0元',
		color: '#ebebeb',
		textColor: '#3c4e63'
	}, {
		title: '待开票金额',
		bage: '0元',
		color: '#ebebeb',
		textColor: '#3c4e63'
	}, {
		title: '审批中订单',
		bage: 4,
		color: '#f29900',
	}, {
		title: '审批中发货单',
		bage: 5,
		color: '#6647ff'
	}, {
		title: '审批中收款单',
		bage: 35,
		color: '#d23ce6'
	}, {
		title: '审批中开票',
		bage: 2,
		color: '#44c1e3'
	}]);
	//
	const tabList = ref([{
		title: '全部'
	}, {
		title: '执行中'
	}, {
		title: '已完成（同意）'
	}, {
		title: '已完成（不同意）'
	}, {
		title: '已取消'
	}, {
		title: '异常中'
	}]);
	//
	const reviewedList = ref([{
		id: 1,
		icon: Download,
		title: 'HB11073493的订单审批',
		time: '耗时1.3小时',
		sub: 'DD24060001_94,600.00元_审批中',
		user: '雄鑫',
		node: '主管审核',
		isnode: '待执行',
		backgroundColor: "red"
	}, {
		id: 2,
		icon: Download,
		title: 'HB11073493的订单审批',
		time: '耗时3.5小时',
		sub: 'DD24060001_94,600.00元_审批中',
		user: '雄鑫',
		node: '主管审核',
		isnode: '待执行',
		backgroundColor: "red"
	}, {
		id: 3,
		icon: Download,
		title: 'HB11073493的采购到货审批',
		time: '耗时6秒',
		sub: '预计2024-06-05到货',
		user: '叽叽叽_CG24060001',
		node: '库管审批',
		isnode: '确认入库',
		backgroundColor: "red"
	}, {
		id: 4,
		icon: Download,
		title: 'HB11073493的采购审批',
		time: '耗时9秒',
		sub: 'CG24060001_ 1666500元_叽叽叽',
		user: '雄鑫',
		node: '采购主管审批',
		isnode: '同意采购',
		backgroundColor: "red"
	}]);
	const calendar = ref<CalendarInstance>();
	const selectDate = (val : CalendarDateType) => {
		if (!calendar.value) return;
		calendar.value.selectDate(val);
	}
	const cities = ref([]);
	const tableData = ref([]);
	const dateStartIndex = ref(-1);
	const selectValue = ref('');
	const selectRef = ref(null);
	const dateStartAll = (type : string) => {
		console.log(type);
		if (type === 'start') {
			dateStartIndex.value--;
		}
		if (type === 'end') {
			dateStartIndex.value++;
		}
		//
		const item = cities.value[dateStartIndex.value];
		console.log('item--->', item);
		selectValue.value = item;
	}
	const selectEr = () => {
		selectValue.value = '';
		selectRef.value.blur();
		dateStartIndex.value = -1;
	}
	const selectChange = (val : any) => {
		console.log('selectChange--->', val);
		const index = findIndexByLabel(cities.value, val, 'label');
		console.log('index--->', index);
		dateStartIndex.value = index;
		selectValue.value = val;
	}
</script>

<style>
	.calendar .el-card__body {
		padding: 0;
	}

	.calendar .el-card__body .el-calendar .el-calendar__header {
		margin-top: 4px;
		padding: 0 8px;
		height: 40px;
	}

	.calendar .el-card__body .el-calendar .el-calendar__body {
		padding: 0 16px;
		height: 260px;
	}

	.calendar .el-card__body .el-calendar .el-calendar__body .el-calendar-table th,
	.calendar .el-card__body .el-calendar .el-calendar__body .el-calendar-table td {
		position: relative;
		min-width: 24px;
		font-weight: 400;
		transition: 0.2s;
		font-size: 14px;
		padding: 3px 1px !important;
		width: auto !important;
		height: auto !important;
	}

	.calendar .el-card__body .el-calendar .el-calendar__body .el-calendar-table td.is-selected {
		background-color: #5283ff;
		border-radius: 6px;
	}

	.calendar .el-card__body .el-calendar .el-calendar__body .el-calendar-table td span,
	.calendar .el-card__body .el-calendar .el-calendar__body .el-calendar-table th span {
		font-size: 16px;
	}

	.calendar .el-card__body .el-calendar .el-calendar__body .el-calendar-table td.is-selected span {
		color: #fff;
	}

	.calendar .el-card__body .el-calendar .el-calendar__body .el-calendar-table .prev div:hover,
	.calendar .el-card__body .el-calendar .el-calendar__body .el-calendar-table .current div:hover,
	.calendar .el-card__body .el-calendar .el-calendar__body .el-calendar-table .next div:hover {
		background-color: transparent;
	}

	.calendar .el-card__body .el-calendar .el-calendar__body .el-calendar-table .prev div,
	.calendar .el-card__body .el-calendar .el-calendar__body .el-calendar-table .current div,
	.calendar .el-card__body .el-calendar .el-calendar__body .el-calendar-table .next div {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		min-width: 24px;
		transition: 0.2s;
		font-size: 14px;
		padding: 3px 1px !important;
		width: auto !important;
		height: auto !important;
	}

	/*  */
	.el-table th.el-table__cell {
		background-color: rgba(0, 0, 0, 0.02);
	}

	.el-tag .el-tag__content {
		max-width: 100%;
		font-size: 14px;
		display: flex;
		align-items: center;
	}
</style>

<style scoped lang="scss">
	@import '../../assets/css/index.scss';

	//
	.my-btn-max.maving {
		background: transparent;
		color: transparent;
		border: 1px solid #eee;
	}

	//
	.el-col {
		.el-calendar {
			--el-calendar-border: 0;
		}
	}

	td .el-calendar-day {
		@include flex();
	}

	.el-calendar-day:hover {
		background-color: #fff;
		cursor: pointer;
	}
</style>